<doc>
  单布局配置
</doc>
<template>
  <el-drawer title="单布局配置" :visible.sync="dialogVisible" size="35%" :wrapperClosable="false">
    <div class="echart-div" v-if="dialogVisible">
      <div id="echart-demo">
        <p class="title-demo" id="title-demo">{{ruleForm.title.name}}</p>
        <echart-model-demo v-if="layoutDemoData.config.echarts.type !=='null'" :layoutDemoData="layoutDemoData">
        </echart-model-demo>
      </div>
    </div>
    <div class="layout-config">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="mini">
        <el-divider content-position="left">标题设置</el-divider>

        <!-- 标题相关设置 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="标题内容">
              <el-input v-model="ruleForm.title.name" placeholder="标题内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题字号">
              <el-input-number v-model="ruleForm.title.fontSize" @change="setTitleStyle" :min="0" :max="100"
                label="标题字号"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题字重">
              <el-input-number v-model="ruleForm.title.fontWeight" @change="setTitleStyle" :min="500" :step="100"
                :max="800" label="标题字重"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="距顶比例">
              <el-input-number v-model="ruleForm.title.top" @change="setTitleStyle" :min="0" :max="100" label="距顶比例">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="距左比例">
              <el-input-number v-model="ruleForm.title.left" @change="setTitleStyle" :min="0" :max="100" label="距左比例">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题颜色">
              <el-color-picker v-model="ruleForm.title.color" @change="setTitleStyle" show-alpha></el-color-picker>
            </el-form-item>
          </el-col>

        </el-row>

        <el-divider content-position="left">类型设置</el-divider>

        <!-- 基础配置 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="报表类型">
              <el-select v-model="ruleForm.echarts.type" placeholder="报表类型" @change="configChange">
                <el-option label="空白布局" value="null"></el-option>
                <el-option label="柱形图" value="bar"></el-option>
                <el-option label="线形图" value="line"></el-option>
                <!-- <el-option label="饼图" value="pie"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">区域设置</el-divider>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="距顶距离">
              <el-input placeholder="请输入内容" v-model="ruleForm.echarts.option.grid.top"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="距底距离">
              <el-input placeholder="请输入内容" v-model="ruleForm.echarts.option.grid.bottom"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="距左距离">
              <el-input placeholder="请输入内容" v-model="ruleForm.echarts.option.grid.left"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="距右距离">
              <el-input placeholder="请输入内容" v-model="ruleForm.echarts.option.grid.right"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备用颜色">
              <el-color-picker class="color-div" v-model="ruleForm.echarts.option.color[0]"></el-color-picker>
              <el-color-picker class="color-div" v-model="ruleForm.echarts.option.color[1]"></el-color-picker>
              <el-color-picker class="color-div" v-model="ruleForm.echarts.option.color[2]"></el-color-picker>
              <el-color-picker class="color-div" v-model="ruleForm.echarts.option.color[3]"></el-color-picker>
              <el-color-picker class="color-div" v-model="ruleForm.echarts.option.color[4]"></el-color-picker>
              <el-color-picker class="color-div" v-model="ruleForm.echarts.option.color[5]"></el-color-picker>
              <el-color-picker class="color-div" v-model="ruleForm.echarts.option.color[6]"></el-color-picker>
              <el-color-picker class="color-div" v-model="ruleForm.echarts.option.color[7]"></el-color-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">横轴设置</el-divider>

        <!-- 横轴配置 -->
        <el-row :gutter="20">
          <!-- 横轴设置 -->
          <el-col :span="12">
            <el-form-item label="横轴显示">
              <el-switch v-model="ruleForm.echarts.option.xAxis.show"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="横轴名称">
              <el-input placeholder="名称" v-model="ruleForm.echarts.option.xAxis.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称颜色">
              <el-color-picker v-model="ruleForm.echarts.option.xAxis.nameTextStyle.color" show-alpha></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称大小">
              <el-input-number v-model="ruleForm.echarts.option.xAxis.nameTextStyle.fontSize" :min="0" :max="100">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="轴线显示">
              <el-switch v-model="ruleForm.echarts.option.xAxis.axisLine.show"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="轴线宽度">
              <el-input-number v-model="ruleForm.echarts.option.xAxis.axisLine.lineStyle.width" :min="0" :max="100">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="轴线类型">
              <el-select v-model="ruleForm.echarts.option.xAxis.axisLine.lineStyle.type" placeholder="类型">
                <el-option label="实线" value="solid"></el-option>
                <el-option label="虚线" value="dashed"></el-option>
                <el-option label="点线" value="dotted"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="轴线透度">
              <el-input-number v-model="ruleForm.echarts.option.xAxis.axisLine.lineStyle.opacity" :step="0.1" :min="0"
                :max="1">
              </el-input-number>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="刻度显示">
              <el-switch v-model="ruleForm.echarts.option.xAxis.axisTick.show"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="刻度向外">
              <el-switch v-model="ruleForm.echarts.option.xAxis.axisTick.inside"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="刻度长度">
              <el-input-number v-model="ruleForm.echarts.option.xAxis.axisTick.length" :step="1" :min="0" :max="30">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="刻度宽度">
              <el-input-number v-model="ruleForm.echarts.option.xAxis.axisTick.lineStyle.width" :step="1" :min="0"
                :max="30">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="刻度类型">
              <el-select v-model="ruleForm.echarts.option.xAxis.axisTick.lineStyle.type" placeholder="类型">
                <el-option label="实线" value="solid"></el-option>
                <el-option label="虚线" value="dashed"></el-option>
                <el-option label="点线" value="dotted"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="刻度透度">
              <el-input-number v-model="ruleForm.echarts.option.xAxis.axisTick.lineStyle.opacity" :step="0.1" :min="0"
                :max="1">
              </el-input-number>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="标签显示">
              <el-switch v-model="ruleForm.echarts.option.xAxis.axisLabel.show"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签向外">
              <el-switch v-model="ruleForm.echarts.option.xAxis.axisLabel.inside"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="旋转角度">
              <el-input-number v-model="ruleForm.echarts.option.xAxis.axisLabel.rotate" :min="0" :max="360">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签距离">
              <el-input-number v-model="ruleForm.echarts.option.xAxis.axisLabel.margin" :min="-30" :max="30">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签颜色">
              <el-color-picker v-model="ruleForm.echarts.option.xAxis.axisLabel.color" show-alpha></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签大小">
              <el-input-number v-model="ruleForm.echarts.option.xAxis.axisLabel.fontSize" :min="0" :max="50">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="分割线显示">
              <el-switch v-model="ruleForm.echarts.option.xAxis.splitLine.show"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分割线宽度">
              <el-input-number v-model="ruleForm.echarts.option.xAxis.splitLine.lineStyle.width" :min="0" :max="30">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分割线透度">
              <el-input-number v-model="ruleForm.echarts.option.xAxis.splitLine.lineStyle.opacity" :step="0.1" :min="0" :max="1">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分割线类型">
              <el-select v-model="ruleForm.echarts.option.xAxis.splitLine.lineStyle.type" placeholder="类型">
                <el-option label="实线" value="solid"></el-option>
                <el-option label="虚线" value="dashed"></el-option>
                <el-option label="点线" value="dotted"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分割线颜色">
              <el-color-picker v-model="ruleForm.echarts.option.xAxis.splitLine.lineStyle.color" show-alpha></el-color-picker>
            </el-form-item>
          </el-col>
        </el-row>


        <el-divider content-position="left">竖轴设置</el-divider>
        
        <!-- 竖轴配置 -->
        <el-row :gutter="20">
          <!-- 竖轴设置 -->
          <el-col :span="12">
            <el-form-item label="竖轴显示">
              <el-switch v-model="ruleForm.echarts.option.yAxis.show"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="竖轴名称">
              <el-input placeholder="名称" v-model="ruleForm.echarts.option.yAxis.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称颜色">
              <el-color-picker v-model="ruleForm.echarts.option.yAxis.nameTextStyle.color" show-alpha></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称大小">
              <el-input-number v-model="ruleForm.echarts.option.yAxis.nameTextStyle.fontSize" :min="0" :max="100">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="轴线显示">
              <el-switch v-model="ruleForm.echarts.option.yAxis.axisLine.show"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="轴线宽度">
              <el-input-number v-model="ruleForm.echarts.option.yAxis.axisLine.lineStyle.width" :min="0" :max="100">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="轴线类型">
              <el-select v-model="ruleForm.echarts.option.yAxis.axisLine.lineStyle.type" placeholder="类型">
                <el-option label="实线" value="solid"></el-option>
                <el-option label="虚线" value="dashed"></el-option>
                <el-option label="点线" value="dotted"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="轴线透度">
              <el-input-number v-model="ruleForm.echarts.option.yAxis.axisLine.lineStyle.opacity" :step="0.1" :min="0" :max="1">
              </el-input-number>
            </el-form-item>
          </el-col>
        
          <el-col :span="12">
            <el-form-item label="刻度显示">
              <el-switch v-model="ruleForm.echarts.option.yAxis.axisTick.show"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="刻度向外">
              <el-switch v-model="ruleForm.echarts.option.yAxis.axisTick.inside"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="刻度长度">
              <el-input-number v-model="ruleForm.echarts.option.yAxis.axisTick.length" :step="1" :min="0" :max="30">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="刻度宽度">
              <el-input-number v-model="ruleForm.echarts.option.yAxis.axisTick.lineStyle.width" :step="1" :min="0" :max="30">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="刻度类型">
              <el-select v-model="ruleForm.echarts.option.yAxis.axisTick.lineStyle.type" placeholder="类型">
                <el-option label="实线" value="solid"></el-option>
                <el-option label="虚线" value="dashed"></el-option>
                <el-option label="点线" value="dotted"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="刻度透度">
              <el-input-number v-model="ruleForm.echarts.option.yAxis.axisTick.lineStyle.opacity" :step="0.1" :min="0" :max="1">
              </el-input-number>
            </el-form-item>
          </el-col>
        
          <el-col :span="12">
            <el-form-item label="标签显示">
              <el-switch v-model="ruleForm.echarts.option.yAxis.axisLabel.show"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签向外">
              <el-switch v-model="ruleForm.echarts.option.yAxis.axisLabel.inside"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="旋转角度">
              <el-input-number v-model="ruleForm.echarts.option.yAxis.axisLabel.rotate" :min="0" :max="360">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签距离">
              <el-input-number v-model="ruleForm.echarts.option.yAxis.axisLabel.margin" :min="-30" :max="30">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签颜色">
              <el-color-picker v-model="ruleForm.echarts.option.yAxis.axisLabel.color" show-alpha></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签大小">
              <el-input-number v-model="ruleForm.echarts.option.yAxis.axisLabel.fontSize" :min="0" :max="50">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="分割线显示">
              <el-switch v-model="ruleForm.echarts.option.yAxis.splitLine.show"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分割线宽度">
              <el-input-number v-model="ruleForm.echarts.option.yAxis.splitLine.lineStyle.width" :min="0" :max="30">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分割线透度">
              <el-input-number v-model="ruleForm.echarts.option.yAxis.splitLine.lineStyle.opacity" :step="0.1" :min="0"
                :max="1">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分割线类型">
              <el-select v-model="ruleForm.echarts.option.yAxis.splitLine.lineStyle.type" placeholder="类型">
                <el-option label="实线" value="solid"></el-option>
                <el-option label="虚线" value="dashed"></el-option>
                <el-option label="点线" value="dotted"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分割线颜色">
              <el-color-picker v-model="ruleForm.echarts.option.yAxis.splitLine.lineStyle.color" show-alpha></el-color-picker>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <el-row :gutter="20">
        <el-col :span="24" style="text-align: center">
          <el-button type="success" size="mini" @click="save()">确认配置</el-button>
        </el-col>
      </el-row>
    </div>
  </el-drawer>
</template>
<script>

  import echartModelDemo from '@/components/echarts/echartModelDemo'

  export default {
    props: ['layoutData'],
    components: {
      echartModelDemo
    },
    data() {
      return {
        dialogVisible: false,
        layoutDemoData: {},
        ruleForm: {
          title: {
            name: '标题',
            fontSize: 12,
            fontWeight: 600,
            color: 'rgba(9, 252, 228, 0.88)',
            top: 3,
            left: 40,
          },
          echarts: {
            type: 'null',
            option: {
              grid: {
                left: "14%",
                right: "14%",
                top: "14%",
                bottom: "14%"
              },
              color: ["#1890ff", "#71cec4", "#aad372", "#eab53c", "#f07374", "#b5a5de", "#eef71b", "#3a74b5"],
              xAxis: {
                type: "category",  // 坐标轴类型-类目轴
                show: true,   // 显示坐标轴
                name: "日期",  // 坐标轴名称
                nameTextStyle: {
                  color: "rgba(0, 255, 212, 1)",  // 坐标轴名称的颜色
                  fontSize: 12,  // 字体大小，number类型。
                },
                axisLine: {       // 坐标轴轴线设置
                  show: true,     // 显示坐标轴轴线
                  lineStyle: {    // 轴线样式设置
                    color: "rgba(238, 10, 10, 1)",   // 轴线颜色
                    width: 1,    // 轴线宽度
                    type: "dashed",   // 轴线类型-虚线
                    opacity: 0.8   // 轴线透明度0.8
                  }
                },
                axisTick: {             // 坐标轴刻度线设置
                  show: true,           // 显示刻度线
                  inside: false,        // 刻度线向外
                  length: 5,            // 刻度线长度
                  lineStyle: {          // 刻度线样式设置
                    width: 0,             //  刻度线宽度
                    type: "dashed",       //  刻度线类型-虚线
                    opacity: 0.8          //  刻度线透明度
                  }
                },
                axisLabel: {     // 刻度标签相关设置
                  show: true,    // 显示刻度标签
                  inside: false,    // 刻度标签向外
                  rotate: 20,    // 标签旋转角度
                  margin: 15,    // 标签与轴线间距离
                  color: "rgba(42, 255, 0, 1)",    // 标签字体颜色
                  fontSize: 16    // 标签字体大小
                },
                splitLine: {    // 分割线设置
                  show: true,   // 显示分割线
                  lineStyle: {  // 分割线样式设置
                    color: "rgba(85, 255, 0, 1)",   // 分割线颜色
                    width: 2,   // 分割线宽度
                    type: "dashed",   // 分割线类型-虚线
                    opacity: 0.5    // 分割线透明度0.5
                  }
                },
              },
              yAxis: {
                type: "value",  // 坐标轴类型-类目轴
                show: true,   // 显示坐标轴
                name: "数量",  // 坐标轴名称
                nameTextStyle: {
                  color: "rgba(0, 255, 212, 1)",  // 坐标轴名称的颜色
                  fontSize: 12,  // 字体大小，number类型。
                },
                axisLine: {       // 坐标轴轴线设置
                  show: true,     // 显示坐标轴轴线
                  lineStyle: {    // 轴线样式设置
                    color: "rgba(238, 10, 10, 1)",   // 轴线颜色
                    width: 1,    // 轴线宽度
                    type: "dashed",   // 轴线类型-虚线
                    opacity: 0.8   // 轴线透明度0.8
                  }
                },
                axisTick: {             // 坐标轴刻度线设置
                  show: true,           // 显示刻度线
                  inside: false,        // 刻度线向外
                  length: 5,            // 刻度线长度
                  lineStyle: {          // 刻度线样式设置
                    width: 0,             //  刻度线宽度
                    type: "dashed",       //  刻度线类型-虚线
                    opacity: 0.8          //  刻度线透明度
                  }
                },
                axisLabel: {     // 刻度标签相关设置
                  show: true,    // 显示刻度标签
                  inside: false,    // 刻度标签向外
                  rotate: 20,    // 标签旋转角度
                  margin: 15,    // 标签与轴线间距离
                  color: "rgba(42, 255, 0, 1)",    // 标签字体颜色
                  fontSize: 16    // 标签字体大小
                },
                splitLine: {    // 分割线设置
                  show: true,   // 显示分割线
                  lineStyle: {  // 分割线样式设置
                    color: "rgba(85, 255, 0, 1)",   // 分割线颜色
                    width: 2,   // 分割线宽度
                    type: "dashed",   // 分割线类型-虚线
                    opacity: 0.5    // 分割线透明度0.5
                  }
                },
              },
            }
          },
        }
      };
    },
    methods: {
      // 初始化
      init() {
        this.layoutDemoData = JSON.parse(JSON.stringify(this.layoutData))
        this.ruleForm = this.recover(this.ruleForm, JSON.parse(JSON.stringify(this.layoutDemoData.config)))
        this.layoutDemoData.config = this.ruleForm
        this.dialogVisible = true
        this.setTitleStyle()
        this.initEcharts()
      },

      setTitleStyle() {
        this.$nextTick(() => {
          let titleDom = document.getElementById('title-demo')
          titleDom.style.fontSize = this.ruleForm.title.fontSize + 'px'
          titleDom.style.fontWeight = this.ruleForm.title.fontWeight
          titleDom.style.top = this.ruleForm.title.top + '%'
          titleDom.style.left = this.ruleForm.title.left + '%'
          titleDom.style.color = this.ruleForm.title.color
        })
      },

      // 初始化echarts
      initEcharts() {
        this.$nextTick(() => {
          let eDom = document.getElementById('echart-demo')
          eDom.style.width = this.layoutDemoData.width + 'px'
          eDom.style.height = this.layoutDemoData.height + 'px'
        })
      },

      // 配置改变
      configChange() {
        this.layoutDemoData.config = this.ruleForm
      },

      // 保存配置
      save() {
        this.layoutData.config = JSON.parse(JSON.stringify(this.ruleForm))
        // this.$emit('save')
        this.$message.success('单布局配置成功')
        this.dialogVisible = false
      },

    }
  };
</script>
<style scoped>
  .demo-ruleForm {
    width: 93%;
  }

  .echart-div {
    width: 100%;
    height: 40%;
    overflow-x: scroll;
    overflow-y: scroll;
    text-align: center;
  }

  .layout-config {
    width: 100%;
    height: calc(60% - 15px);
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: 10px;
  }

  #echart-demo {
    background-color: rgba(95, 158, 160, 0.7);
    border: 1px solid chartreuse;
    display: inline-block;
    position: relative;
  }

  .title-demo {
    position: absolute;
    margin: 0;
  }

  .color-div {
    margin-right: 3%;
  }
</style>